<template>
  <div>
    <div class="banner"></div>
    <div style="margin-top: -80px"><person-info/></div>
    <i-row>&nbsp;</i-row>
    <i-row>
      <i-col span="12">
        <card title="运动处方" subTitle="制定运动处方" iconStyle="font-size:100px;position:relative;float:right" icon="directions_run"></card>
      </i-col>
      <i-col span="12">
        <card title="自我评测" subTitle="健康自我评测" iconStyle="font-size:25px" icon="watch"></card>
        <i-row>&nbsp;</i-row>
        <card title="知识视窗" subTitle="了解更多知识视窗" icon="class" iconStyle="font-size:25px"></card>
      </i-col>
    </i-row>
    <div style="height: 5px"></div>
    <i-row>
      <i-col :offset="1" span="23">
        <span class="title">为你推荐</span>
      </i-col>
    </i-row>
    <div style="height: 5px"></div>
    <recommend/>
  </div>
</template>

<script>
import personInfo from './personInfo'
import card from './card'
import recommend from './recommend'
export default {
  components: {
    personInfo,
    card,
    recommend
  },
  data () {
    return {
      motto: 'Hello miniprograme',
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      }
    }
  },
  methods: {
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    },
    clickHandle (ev) {
      console.log('clickHandle:', ev)
      // throw {message: 'custom test'}
    }
  },
  created () {
  }
}
</script>

<style scoped>
  .banner {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 160px;
    line-height: 23px;
    background-color: rgba(134, 134, 134, 1);
  }
  .title {
    font-size: 16px;
  }
</style>
